<template>
  <div class="forward-post-map" id="forward-post-map">

  </div>
</template>
<script>
import {ImageLayer, LineLayer, Marker, PointLayer, PolygonLayer, Popup, Scene} from '@antv/l7'
import {TencentMap} from "@antv/l7-maps";
import {FeatureCollectionLineString, getMapDialogDom, inverted} from '@/utils/utils'
import {nanoid} from "nanoid";
import Vue from "vue";
import CameraDialog from "@/components/Home/MapDialog/CameraDialog.vue";
import LineDialog from "@/components/ForwardPost/MapDialog/LineDialog.vue";
import StationDialog from "@/components/Circle/MapDialog/StationDialog.vue";
import DroneDialog from "@/components/Home/MapDialog/DroneDialog.vue";
import RenlianDialog from "@/components/Home/MapDialog/RenlianDialog.vue";
const blueLine = inverted([
  [39.737766, 98.487859],
  [39.737649, 98.500279],
  [39.737374, 98.501191],
  [39.727579, 98.50051],
  [39.727638, 98.487562],
  [39.737766, 98.487859],
])
const blueLine2 = inverted([
  [39.736057,98.490327],
  [39.736107,98.498328],
  [39.735388, 98.49837],
  [39.734453, 98.498533],
  [39.729948, 98.498192],
  [39.729948, 98.490019],
  [39.736057,98.490327],
])
const yellowLine = inverted([
  [39.735957,98.490427],
  [39.736007,98.498228],
  [39.735388, 98.49827],
  [39.734453, 98.498433],
  [39.730048, 98.498092],
  [39.730048, 98.490119],
  [39.735957,98.490427],
])
const redLine = inverted([
  [39.734636, 98.493474],
  [39.734787, 98.494342],
  [39.734678, 98.4952],
  [39.733417,98.4952],
  [39.733376,98.495482],
  [39.732641,98.495439],
  [39.732624,98.493105],
  [39.733484,98.49305],
  [39.733492,98.493463],
  [39.734636, 98.493474],
])
const cameraPosition = [
  {tempId: null, name: '酒泉市人民政府(广场西路)', lngLat: {lng: 98.487859, lat: 39.737766}},
  {tempId: null, name: '酒泉市人民政府(玉门西路)', lngLat: {lng: 98.500279, lat: 39.737649}},
  {tempId: null, name: '酒泉世纪大酒店西南(世纪大道)', lngLat: {lng: 98.501191, lat: 39.737374}},
  {tempId: null, name: '酒泉世纪大酒店(玉门东路)', lngLat: {lng: 98.50051, lat: 39.727579}},
  {tempId: null, name: '酒泉世纪大酒店南(玉门东路)', lngLat: {lng: 98.487562, lat: 39.727638}},
  {tempId: null, name: '飞天大厦(广场东路)', lngLat: {lng: 98.487859, lat: 39.737766}},
  {tempId: null, name: '飞天大厦(广场东路)', lngLat: {lng: 98.496271, lat: 39.734006}},
  {tempId: null, name: '飞天大厦(广场东路)', lngLat: {lng: 98.496247, lat: 39.733511}},
  {tempId: null, name: '飞天大厦(广场东路)南', lngLat: {lng: 98.496235, lat: 39.733187}},
  {tempId: null, name: '酒泉市人民政府(广场东路)', lngLat: {lng: 98.496204, lat: 39.732743}},
  {tempId: null, name: '酒泉市人民政府(富康路)', lngLat: {lng: 98.49618, lat: 39.732201}},
  {tempId: null, name: '酒泉市人民政府(富康路)', lngLat: {lng: 98.494429, lat: 39.732187}},
  {tempId: null, name: '酒泉市人民政府(富康路)', lngLat: {lng: 98.494423, lat: 39.732196}},
  {tempId: null, name: '酒泉市人民政府(富康路)', lngLat: {lng: 98.49414, lat: 39.732201}},
  {tempId: null, name: '酒泉市人民政府(富康路)', lngLat: {lng: 98.493081, lat: 39.732196}},
  {tempId: null, name: '酒泉市人民政府(富康路)', lngLat: {lng: 98.492322, lat: 39.732196}},
  {tempId: null, name: '酒泉市人民政府(广场西路)', lngLat: {lng: 98.492334, lat: 39.732627}},
  {tempId: null, name: '酒泉市人民政府(广场西路)', lngLat: {lng: 98.492394, lat: 39.733516}},
  {tempId: null, name: '洪洋财富大厦(广场东路)', lngLat: {lng: 98.496073, lat: 39.730485}},
  {tempId: null, name: '肃州区中国人民银行酒泉市分行(广场西路西)', lngLat: {lng: 98.491841, lat: 39.73352}},
  {tempId: null, name: '酒泉市人民政府西南(广场西路)', lngLat: {lng: 98.492296, lat: 39.732051}},
  {tempId: null, name: '酒泉图书馆(广场西路)', lngLat: {lng: 98.492187, lat: 39.729889}},
  {tempId: null, name: '中盛佳苑(广场西路)', lngLat: {lng: 98.492151, lat: 39.729255}},
  {tempId: null, name: '创通商务大酒店(广场西路)', lngLat: {lng: 98.490827, lat: 39.727755}},
  {tempId: null, name: '世纪广场(敦煌路)', lngLat: {lng: 98.491934, lat: 39.727727}},
  {tempId: null, name: '世纪广场(敦煌路)', lngLat: {lng: 98.493915, lat: 39.727727}},
  {tempId: null, name: '品鑫大酒店(敦煌路)', lngLat: {lng: 98.497003, lat: 39.727704}},
  {tempId: null, name: '洪洋商业广场(广场东路)', lngLat: {lng: 98.49681, lat: 39.728019}},
  {tempId: null, name: '乐都KTV(广场东路店)', lngLat: {lng: 98.496455, lat: 39.728565}},
  {tempId: null, name: '洪洋商业广场(广场东路)', lngLat: {lng: 98.496033, lat: 39.729884}},
  {tempId: null, name: '洪洋商业广场(宝泉东路)', lngLat: {lng: 98.496039, lat: 39.728565}},
  {tempId: null, name: '洪洋商业广场(宝泉东路)', lngLat: {lng: 98.496037, lat: 39.729916}},
  {tempId: null, name: '酒泉市财政局(广场东路)', lngLat: {lng: 98.496163, lat: 39.731627}},
  {tempId: null, name: '酒泉市人民政府(广场东路)', lngLat: {lng: 98.496171, lat: 39.732131}},
  {tempId: null, name: '中旺佳苑东北(玉门西路)', lngLat: {lng: 98.490247, lat: 39.734424}},
  {tempId: null, name: '酒泉市肃州区人民法院(富康路)', lngLat: {lng: 98.49008, lat: 39.73218}},
  {tempId: null, name: '酒泉鑫惠成大酒店(宝泉西路)', lngLat: {lng: 98.489956, lat: 39.729858}},
  {tempId: null, name: '正信大厦东(飞天路)', lngLat: {lng: 98.487636, lat: 39.72887}},
  {tempId: null, name: '伊鼎火锅(敦煌路店)南', lngLat: {lng: 98.487619, lat: 39.727674}},
  {tempId: null, name: '酒泉宏兴国际大酒店南(神舟路)', lngLat: {lng: 98.49832, lat: 39.737583}},
  {tempId: null, name: '家福超市(神舟路店)', lngLat: {lng: 98.498303, lat: 39.735923}},
  {tempId: null, name: '星宇夜音乐餐吧旗舰店(神舟路)', lngLat: {lng: 98.498505, lat: 39.734459}},
  {tempId: null, name: '酒泉市市场监督管理局(富康路)', lngLat: {lng: 98.498382, lat: 39.73217}},
  {tempId: null, name: '洪洋商业广场(神舟路)', lngLat: {lng: 98.498232, lat: 39.729893}},
  {tempId: null, name: '洪洋商业广场(宝泉东路)', lngLat: {lng: 98.498179, lat: 39.729883}},
  {tempId: null, name: '洪洋商业广场(敦煌路)', lngLat: {lng: 98.498126, lat: 39.727654}},
  {tempId: null, name: '万达广场(酒泉肃州店)东南', lngLat: {lng: 98.487625, lat: 39.732187}},
  {tempId: null, name: '酒泉丝路文华假日酒店东北50米(宝泉西路)', lngLat: {lng: 98.48755, lat: 39.729856}},
  {tempId: null, name: '西峰镇G312(万达广场)', lngLat: {lng: 98.487646, lat: 39.734425}},
  {tempId: null, name: '酒泉金凯悦假日酒店东南(风电大道)', lngLat: {lng:98.487854, lat: 39.73775}},
  {tempId: null, name: '西峰镇G312(万达广场)', lngLat: {lng:98.48767, lat: 39.734429}},
  {tempId: null, name: '酒泉市博物馆东50米(世纪大道东)', lngLat: {lng:98.493966, lat: 39.737695}},
  {tempId: null, name: '酒泉宏兴国际大酒店(盘旋西路)', lngLat: {lng:98.498357, lat: 39.737677}},
  {tempId: null, name: '成林大厦(盘旋西路)', lngLat: {lng:98.500273, lat: 39.737607}},
  {tempId: null, name: '酒泉光明大酒店西(肃州路)', lngLat: {lng:98.501028, lat: 39.737042}},
  {tempId: null, name: '富康家世界办公家具区(肃州路店)西北', lngLat: {lng:98.500677, lat: 39.73218}},
  {tempId: null, name: '速8酒店(酒泉市政府油田医院店)西北50米', lngLat: {lng:98.500531, lat: 39.727561}},
  {tempId: null, name: '酒泉市博物馆(盘旋西路)', lngLat: {lng:98.492437, lat: 39.737764}},
  {tempId: null, name: '酒泉市中医院(盘旋西路)', lngLat: {lng:98.495698, lat: 39.737614}},
  {tempId: null, name: '酒泉市自然资源局肃州分局(肃州路)', lngLat: {lng:98.500879, lat: 39.734991}},
  {tempId: null, name: '交通银行(酒泉分行营业部)', lngLat: {lng:98.500618, lat:39.731477}},
  {tempId: null, name: 'VPARTY旗舰店(酒泉富康店)西南', lngLat: {lng:98.500614, lat:39.728579}},
  {tempId: null, name: '新增监控点位', lngLat: {lng: 98.493036, lat: 39.730679}, icon: 'https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/guangchang/D7D1B1DF-A771-6D76-9FC0-3DDB17E35155.png', video: 'https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/guangchang/F469DF64-2ED1-1CFC-995E-948BD3CA6E96.mp4'}
]
export default {
  name: 'ForwardPostMap',
  data() {
    return {
      scene: null,
      polygonLayer:null
    }
  },
  methods: {
    initMap() {
      this.scene = new Scene({
        id: 'forward-post-map',
        logoVisible: false,
        antialias: true,
        map: new TencentMap({
          zoom: 17,
          minZoom: 17,
          maxZoom: 17,
          center: [98.494247, 39.733017],
          rotateEnable: false,
          pitch: 20,
          mapStyleId: 'style1'
        })
      })
      const blueLineLayer = new LineLayer().source(FeatureCollectionLineString(blueLine)).size(2)
          .color('#0AA7FF')
          .style({
            lineType: 'dash',
            dashArray: [5, 5]
          })
      blueLineLayer.on('click',(event)=>{
        this.handleLineClick(1,event)
      })
      this.scene.addLayer(blueLineLayer)

      const blueTextLayer=new PointLayer({zIndex:10}).source({
        type:'FeatureCollection',
        features:[
          {
            type:'Feature',
            properties: {
              name: '外圈'
            },
            geometry: {
              type: 'Point',
              coordinates: [98.487035,39.733968]
            }
          }
        ]
      }).shape('name','text').color('#0AA7FF').style({
        textAnchor:'center',
        spacing:2,
        opacity:1,
        fontWeight:900
      }).size(16)
      this.scene.addLayer(blueTextLayer)
      blueTextLayer.on('click',(event)=>{
        this.handleLineClick(1,event)
      })

      const blueLineLayer2 = new LineLayer().source(FeatureCollectionLineString(blueLine2)).size(2)
          .color('#0AA7FF')
          .style({
            lineType: 'dash',
            dashArray: [5, 5]
          })
      blueLineLayer2.on('click',(event)=>{
        this.handleLineClick(2,event);
      })
      this.scene.addLayer(blueLineLayer2)

      const blue2TextLayer=new PointLayer({zIndex:10}).source({
        type:'FeatureCollection',
        features:[
          {
            type:'Feature',
            properties: {
              name: '外圈'
            },
            geometry: {
              type: 'Point',
              coordinates: [98.489326,39.733968]
            }
          }
        ]
      }).shape('name','text').color('#0AA7FF').style({
        textAnchor:'center',
        spacing:2,
        opacity:1,
        fontWeight:900
      }).size(16)
      this.scene.addLayer(blue2TextLayer)

      blue2TextLayer.on('click',(event)=>{
        this.handleLineClick(2,event);
      })

      const yellowLineLayer = new LineLayer().source(FeatureCollectionLineString(yellowLine)).size(2)
          .color('#FED52F')
          .style({
            lineType: 'dash',
            dashArray: [5, 5]
          })
      yellowLineLayer.on('click',(event)=>{
        this.handleLineClick(3,event)
      })
      this.scene.addLayer(yellowLineLayer)

      const yellowTextLayer=new PointLayer({zIndex:10}).source({
        type:'FeatureCollection',
        features:[
          {
            type:'Feature',
            properties: {
              name: '内圈'
            },
            geometry: {
              type: 'Point',
              coordinates: [98.490926,39.733968]
            }
          }
        ]
      }).shape('name','text').color('#FED52F').style({
        textAnchor:'center',
        spacing:2,
        opacity:1,
        fontWeight:900
      }).size(16)
      this.scene.addLayer(yellowTextLayer)

      yellowTextLayer.on('click',(event)=>{
        this.handleLineClick(3,event)
      })

      const redLineLayer = new LineLayer().source(FeatureCollectionLineString(redLine)).size(2)
          .color('#EA0000')
          .style({
            lineType: 'dash',
            dashArray: [5, 5]
          })
      redLineLayer.on('click',(event)=>{
        this.handleLineClick(4,event)
      })
      this.scene.addLayer(redLineLayer)

      const redTextLayer=new PointLayer({zIndex:10}).source({
        type:'FeatureCollection',
        features:[
          {
            type:'Feature',
            properties: {
              name: '核心圈'
            },
            geometry: {
              type: 'Point',
              coordinates: [98.492974,39.733968]
            }
          }
        ]
      }).shape('name','text').color('#EA0000').style({
        textAnchor:'center',
        spacing:2,
        opacity:1,
        fontWeight:900
      }).size(16)
      this.scene.addLayer(redTextLayer)

      redTextLayer.on('click',(event)=>{
        this.handleLineClick(4,event)
      })


      for (let item of cameraPosition) {
        const layer = new ImageLayer({});
        const size = {x: 0.0002, y: 0.0002}
        const offset = {x: -0.0001, y: 0.0001}
        layer.source(item.icon || require('@/assets/images/camera.png'), {
          parser: {
            type: 'image',
            extent: [
              item.lngLat.lng - size.x + offset.x, item.lngLat.lat - size.y + offset.y, item.lngLat.lng + size.x + offset.x, item.lngLat.lat + size.y + offset.y
            ],
          },
        });
        item.tempId = layer.id;
        layer.on('click', (event) => {
          const point = cameraPosition.find(item1 => item1.tempId === layer.id)
          this.scene.panTo([event.lngLat.lng, event.lngLat.lat])
          const id='camera-dialog-'+nanoid(10)
          const popup = new Popup({
            lngLat: event.lngLat,
            closeOnClick: true,
            closeOnEsc: true,
            title: point.name,
            html: `<div class="camera-map-dialog" style="width:100%;height:100%" id="${id}"></div>`,
            offsets: [-30, 30]
          })
          let componentInstance = null
          popup.on('open',()=>{
            componentInstance=new Vue({
              render(h) {
                return h(CameraDialog, {
                  props: {
                    videoUrl: point.video
                  }
                })
              }
            }).$mount('#'+id)
          })
          popup.on('close',()=>{
            if(componentInstance){
              componentInstance.$destroy()
            }
          })
          this.scene.addPopup(popup)
        })
        this.scene.addLayer(layer)
      }
      const policeStation=[{
        tempId: null,
        lngLat: {
          lng: 98.495878,
          lat: 39.731747,
        },
        name: '市政警务站',
        type: '一类警务站',
        address: '酒泉市肃州区广场东路',
        photo:'https://police-station-1306862033.cos.ap-chengdu.myqcloud.com/guangchang/WechatIMG48.jpeg'
      }]
      for (let item of policeStation) {
        const layer = new ImageLayer({});
        const size = {x: 0.0003, y: 0.0002}
        const offset = {x: -0.0001, y: 0.0001}
        layer.source(require('@/assets/images/police-room.png'), {
          parser: {
            type: 'image',
            extent: [
              item.lngLat.lng - size.x + offset.x, item.lngLat.lat - size.y + offset.y, item.lngLat.lng + size.x + offset.x, item.lngLat.lat + size.y + offset.y
            ],
          },
        });
        item.tempId = layer.id;
        layer.on('click', (event) => {
          const point = policeStation.find(item1 => item1.tempId === layer.id)
          this.scene.panTo([event.lngLat.lng, event.lngLat.lat])
          const id = 'station-dialog-' + nanoid(10)
          const popup = new Popup({
            lngLat: event.lngLat,
            closeOnClick: true,
            closeOnEsc: true,
            title: point.name,
            html: `<div class="station-map-dialog" style="width:100%;height:100%" id="${id}"></div>`,
            offsets: [-30, 30]
          })
          let componentInstance = null
          popup.on('open', () => {
            componentInstance = new Vue({
              render(h) {
                return h(StationDialog,{
                  props:{
                    info:point
                  }
                })
              }
            }).$mount('#' + id)
          })
          popup.on('close', () => {
            if (componentInstance) {
              componentInstance.$destroy()
            }
          })
          this.scene.addPopup(popup)
        })
        this.scene.addLayer(layer)
      }
      const dronePosition = [
        {tempId: null, name: '酒泉市市政大厦无人机回传画面', lngLat: {lng: 98.494869, lat: 39.731676}}
      ]
      for (const item of dronePosition) {
        const layer = new ImageLayer({});
        const size = {x: 0.0004, y: 0.0004}
        const offset = {x: 0.0000, y: 0.0001}
        layer.source(require('@/assets/images/drone.png'), {
          parser: {
            type: 'image',
            extent: [
              item.lngLat.lng - size.x + offset.x, item.lngLat.lat - size.y + offset.y, item.lngLat.lng + size.x + offset.x, item.lngLat.lat + size.y + offset.y
            ],
          },
        });
        item.tempId = layer.id;
        layer.on('click', (event) => {
          const point = dronePosition.find(item1 => item1.tempId === layer.id)
          this.scene.panTo([event.lngLat.lng, event.lngLat.lat])

          const id = 'drone-dialog-' + nanoid(10)
          const popup = new Popup({
            lngLat: event.lngLat,
            closeOnClick: true,
            closeOnEsc: true,
            title: point.name,
            html: `<div class="drone-map-dialog" style="width:100%;height:100%" id="${id}"></div>`,
            offsets: [-30, 30]
          })
          let componentInstance = null
          popup.on('open', () => {
            componentInstance = new Vue({
              render(h) {
                return h(DroneDialog)
              }
            }).$mount('#' + id)
          })
          popup.on('close', () => {
            if (componentInstance) {
              componentInstance.$destroy()
            }
          })
          this.scene.addPopup(popup)
        })
        this.scene.addLayer(layer)
      }

      const renlianPosition = [
        {tempId: null, name: '人脸抓拍画面', lngLat: {lng: 98.496716, lat: 39.732268}}
      ]
      for (const item of renlianPosition) {
        const layer = new ImageLayer({});
        const size = {x: 0.0004, y: 0.0004}
        const offset = {x: 0.0000, y: 0.0001}
        layer.source(require('@/assets/images/renlian.png'), {
          parser: {
            type: 'image',
            extent: [
              item.lngLat.lng - size.x + offset.x, item.lngLat.lat - size.y + offset.y, item.lngLat.lng + size.x + offset.x, item.lngLat.lat + size.y + offset.y
            ],
          },
        });
        item.tempId = layer.id;
        layer.on('click', (event) => {
          const point = renlianPosition.find(item1 => item1.tempId === layer.id)
          this.scene.panTo([event.lngLat.lng, event.lngLat.lat])

          const id = 'renlian-dialog-' + nanoid(10)
          const popup = new Popup({
            lngLat: event.lngLat,
            closeOnClick: true,
            closeOnEsc: true,
            title: point.name,
            html: `<div class="renlian-map-dialog" style="width:800px;height:450px" id="${id}"></div>`,
            offsets: [-30, 30]
          })
          let componentInstance = null
          popup.on('open', () => {
            componentInstance = new Vue({
              render(h) {
                return h(RenlianDialog)
              }
            }).$mount('#' + id)
          })
          popup.on('close', () => {
            console.log('弹窗即将关闭');
            if (componentInstance) {
              console.log('找到组件实例');
              const dialogComponent = componentInstance.$children[0];
              if (dialogComponent && dialogComponent.stopVideo) {
                console.log('调用 stopVideo 方法');
                dialogComponent.stopVideo();
              } else {
                console.log('未找到 stopVideo 方法');
              }
              componentInstance.$destroy();
              console.log('组件已销毁');
            } else {
              console.log('未找到组件实例');
            }
          })
          popup.on('hide', () => {
            console.log('弹窗即将隐藏');
            if (componentInstance) {
              console.log('找到组件实例');
              const dialogComponent = componentInstance.$children[0];
              if (dialogComponent && dialogComponent.stopVideo) {
                console.log('调用 stopVideo 方法');
                dialogComponent.stopVideo();
              }
            }
          })
          this.scene.addPopup(popup)
        })
        this.scene.addLayer(layer)
      }


      const layer = new ImageLayer({});
      const size = {x: 0.0004, y: 0.0003}
      const offset = {x: 0.0000, y: 0.0001}
      const petition = {
        lngLat: {
          lng: 98.496584,
          lat: 39.731222,
        }
      }
      layer.source(require('@/assets/images/petition.png'), {
        parser: {
          type: 'image',
          extent: [
            petition.lngLat.lng - size.x + offset.x, petition.lngLat.lat - size.y + offset.y, petition.lngLat.lng + size.x + offset.x, petition.lngLat.lat + size.y + offset.y
          ],
        },
      });
      this.scene.addLayer(layer)
      const petitionTextLayer=new PointLayer({zIndex:10}).source({
        type:'FeatureCollection',
        features:[
          {
            type:'Feature',
            properties: {
              name: '信访局'
            },
            geometry: {
              type: 'Point',
              coordinates: [98.496584,39.731222]
            }
          }
        ]
      }).shape('name','text').color('#EA0000').style({
        textAnchor:'center',
        spacing:2,
        opacity:1,
        fontWeight:900
      }).size(16)
      this.scene.addLayer(petitionTextLayer)
    },
    handleLineClick(type,event){
      let area=null;
      let color=null
      this.scene.panTo([event.lngLat.lng, event.lngLat.lat])
      const id='line-dialog-'+nanoid(10)
      let popup=null
      let componentInstance = null
      if(type===1){
        popup = new Popup({
          lngLat: event.lngLat,
          closeOnClick: true,
          closeOnEsc: true,
          title: '外圈快速处置体系',
          html: `<div class="line-map-dialog" style="width:100%;height:100%" id="${id}"></div>`,
          offsets: [-30, 30]
        })
        area=blueLine;
        color='rgba(10,167,255,0.1)'
      }else if(type===2){
        popup = new Popup({
          lngLat: event.lngLat,
          closeOnClick: true,
          closeOnEsc: true,
          title: '外圈快速处置体系',
          html: `<div class="line-map-dialog" style="width:100%;height:100%" id="${id}"></div>`,
          offsets: [-30, 30]
        })
        area=blueLine2;
        color='rgba(10,167,255,0.1)'
      }else if(type===3){
        popup = new Popup({
          lngLat: event.lngLat,
          closeOnClick: true,
          closeOnEsc: true,
          title: '内圈快速处置体系',
          html: `<div class="line-map-dialog" style="width:100%;height:100%" id="${id}"></div>`,
          offsets: [-30, 30]
        })
        area=yellowLine;
        color='rgba(254,213,47,0.1)'
      }else if(type===4){
        popup = new Popup({
          lngLat: event.lngLat,
          closeOnClick: true,
          closeOnEsc: true,
          title: '核心圈快速处置体系',
          html: `<div class="line-map-dialog" style="width:100%;height:100%" id="${id}"></div>`,
          offsets: [-30, 30]
        })
        area=redLine;
        color='rgba(234,0,0,0.1)'
      }
      if(popup){
        popup.on('open',()=>{
          componentInstance=new Vue({
            render(h) {
              return h(LineDialog,{
                props:{
                  type,
                }
              })
            }
          }).$mount('#'+id)
        })
        popup.on('close',()=>{
          if(componentInstance){
            componentInstance.$destroy()
          }
          if(this.polygonLayer){
            this.scene.removeLayer(this.polygonLayer)
          }
        })
        this.scene.addPopup(popup)
      }
      if(area){
        this.polygonLayer=new PolygonLayer().source({
          type: 'FeatureCollection',
          features: [
            {
              type: 'Feature',
              properties: {},
              geometry: {
                type: 'Polygon',
                coordinates: [
                  [
                      ...area
                  ],
                ],
              },
            },
          ],
        }).shape('fill').color(color)
        this.scene.addLayer(this.polygonLayer)
      }
    }
  },
  mounted() {
    this.initMap();
  }
}
</script>
<style lang="scss">
.forward-post-map {
  .l7-marker-container {
    z-index: 3 !important;
  }

  .l7-popup {
    width: auto !important;
    .l7-popup-tip {
      display: none;
    }

    .l7-popup-content {
      width: auto !important;
      background: url("~@/assets/images/map-dialog-background.png") no-repeat center;
      background-size: 100% 100%;
      padding: 12px;
      position: relative;

      .l7-iconfont.l7-popup-close-button {
        display: none;
      }

      .l7-popup-content__title {
        color: $fontColorMain;
      }
    }
  }
}
</style>
<style scoped lang="scss">
.forward-post-map {
  width: 100%;
  height: 100%;
}
</style>
